<template>
    <div
        class="mask" v-if="showCart && productsCalc.total>0"
        @click="handleCartShowChange"></div>
    <div class="cart">
        <div class="product" v-if="showCart && productsCalc.total>0">
            <div class="product__header">
                <div
                    class="produce__header__all"
                    @click="() => setCartItemsChecked(shopId)">
                        <span class="product__header__icon iconfont" v-html="productsCalc.allChecked ? '&#xe618;' : '&#xe619;'"></span>全选</div>
                <div class="product__header__clear"><span @click="() => clearCartProducts(shopId)">清空购物车</span></div>
            </div>
            <template v-for="(item) in productList" :key="item._id">
                <div class="product__item" v-if="item.count > 0">
                    <div
                        class="product__item__checked iconfont"
                        v-html="item.check ? '&#xe618;' : '&#xe619;'"
                        @click="()=>changeCartItemChecked(shopId, item._id)"></div>
                    <img class="product__item__img" :src="item.imgUrl" alt="">
                    <div class="product__item__detail">
                        <h4 class="product__item__title">{{ item.name }}</h4>
                        <p class="product__item__price">
                            <span class="product__item__yen">&yen;</span>{{ item.price }}
                            <span class="product__item__origin">&yen;{{ item.oldprice }}</span>
                        </p>
                    </div>
                    <div class="product__num">
                        <span
                            class="product__num__minus"
                            @click="()=>{ changeCartItemInfo(shopId, item._id, item, -1) }" >-</span>
                        {{ item.count || 0 }}
                        <span
                            class="product__num__plus"
                            @click="()=>{ changeCartItemInfo(shopId, item._id, item, 1) }" >+</span>
                    </div>
                </div>
            </template>
        </div>
        <div class="check">
            <div class="check__icon">
                <img src="http://www.dell-lee.com/imgs/vue3/basket.png" alt=""
                    class="check__icon__img"
                    @click="handleCartShowChange">
                <div class="check__icon__tag">{{productsCalc.total}}</div>
            </div>
            <div class="check__info">
                总计: <span class="check__info__price">&yen;{{ productsCalc.price }}</span>
            </div>
            <div class="check__btn">
                <router-link :to="{name:'Home'}">
                    去结算
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import {useStore} from "vuex";
import {useRoute} from "vue-router";
import {computed, ref} from "vue";
import {useCommonCartEffect} from "@/views/Shop/commonCartEffect";

//购物车相关逻辑
const useCartEffect = (shopId) => {
    const {changeCartItemInfo} = useCommonCartEffect()
    const store = useStore()
    const cartList = store.state.cartList

    const productsCalc = computed(()=>{
        const productList = cartList[shopId]?.productList
        const result = {total:0, price:0, allChecked:true}
        if(productList){
            for(let i in productList){
                const product = productList[i]
                result.total += product.count
                if(product.check){
                    result.price += (product.count * product.price)
                }
                if(product.count>0 && !product.check){
                    result.allChecked = false
                }
            }
        }
        result.price = result.price.toFixed(2)
        return result
    })

    const setCartItemsChecked = (shopId) => {
        store.commit('setCartItemsChecked', {shopId})
    }

    const changeCartItemChecked = (shopId, productId) =>{
        store.commit('changeCartItemChecked', { shopId, productId })
    }

    const productList = computed(() => {
        const productList = cartList[shopId]?.productList || []
        return productList
    })

    const clearCartProducts = (shopId) => {
        store.commit('clearCartProducts', { shopId })
    }

    return {productList, changeCartItemInfo, changeCartItemChecked, clearCartProducts, setCartItemsChecked, productsCalc}
}

//展示隐藏购物车
const toggleCartEffect = () => {
    const showCart = ref(false)
    const handleCartShowChange = () =>{
        showCart.value = !showCart.value
    }
    return {showCart, handleCartShowChange}
}

export default {
    name: "Cart",
    setup(){
        const route = useRoute();
        const shopId = route.params.id
        const {showCart, handleCartShowChange} = toggleCartEffect()
        const { productList, changeCartItemInfo, changeCartItemChecked, clearCartProducts, productsCalc, setCartItemsChecked }  = useCartEffect(shopId)
        return { productsCalc, productList, shopId, changeCartItemInfo, changeCartItemChecked, clearCartProducts, setCartItemsChecked, showCart, handleCartShowChange }
    }
}
</script>

<style scoped lang="scss">
@import '../../style/viriables';
@import "../../style/mixins";

.mask{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 1;
}

.cart{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: $bgcolor;
}

.check{
    line-height: .5rem;
    display: flex;
    height: .49rem;
    border: 1px solid $content-bgcolor;
    &__icon{
        position: relative;
        width: .84rem;
        &__img{
            width: .28rem;
            height: .26rem;
            display: block;
            margin: .12rem auto;
        }
        &__tag{
            position: absolute;
            min-width: .2rem;
            height: .2rem;
            padding: 0 0.04rem;
            background-color: $highlight-fontcolor;
            border-radius: .1rem;
            font-size: .12rem;
            line-height: .2rem;
            text-align: center;
            left: .45rem;
            top: .04rem;
            color: $bgcolor;
            transform: scale(.5, .5);
            transform-origin: left center;
        }
    }
    &__info{
        flex: 1;
        color: $content-fontcolor;
        font-size: .12rem;
        &__price{
            color: $highlight-fontcolor;
            font-size: .18rem ;
        }
    }
    &__btn{
        width: .98rem;
        background-color: #4fb0f9;
        color: $bgcolor;
        font-size: .14rem;
        text-align: center;
        a{
            color: $bgcolor;
            text-decoration: none;
        }
    }
}
.product{
    flex: 1;
    overflow-y: scroll;
    background: $bgcolor;
    &__header{
        display: flex;
        line-height: .52rem;
        border-bottom: 1px solid $content-bgcolor;
        margin-left: .18rem;
        &__all{
            width: .64rem;
        }
        &__icon{
            color: $btn-bgColor;
            font-size: .2rem;
            display: inline-block;
            vertical-align: top;
            margin-right: .1rem;
        }
        &__clear{
            flex:1;
            text-align: right;
            line-height: .52rem;
            font-size: .14rem;
            color:$content-fontcolor;
            margin-right: .16rem;
        }
    }
    &__item{
        position: relative;
        display: flex;
        padding: .12rem 0;
        margin: 0 .16rem;
        border-bottom: .01rem solid $content-bgcolor;
        &__checked{
            color: $btn-bgColor;
            font-size: .2rem;
            line-height: .5rem;
            margin-right: .2rem;
        }
        &__detail{
            overflow: hidden;
        }
        &__img{
            width: .46rem;
            height: .46rem;
            margin-right: .16rem;
        }
        &__title{
            font-size: 14px;
            line-height: .2rem;
            color: $content-fontcolor;
            margin: 0;
            @include ellipse()
        }
        &__price{
            margin: .06rem 0 0 0;
            line-height: .2rem;
            font-size: .14rem;
            color: $highlight-fontcolor;
        }
        &__yen{
            font-size: .12rem;
        }
        &__origin{
            line-height: .2rem;
            font-size: .12rem;
            color: $light-fontColor;
            text-decoration: line-through;
            margin-left: .06rem;
        }

        .product__num{
            position: absolute;
            right: .12rem;
            bottom: .18rem;
            text-align: center;
            &__minus, &__plus{
                width: .2rem;
                height: .2rem;
                line-height: .16rem;
                display: inline-block;
                border-radius: 50%;
                font-size: .2rem;
                text-align: center;
            }
            &__minus{
                border: .01rem solid $medium-fontColor;
                color: $medium-fontColor;
                margin-right: .05rem;
            }
            &__plus{
                background-color: $btn-bgColor;
                color: $bgcolor;
                border: .01rem solid $btn-bgColor;
                margin-left: .05rem;
            }
        }
    }
}
</style>
